import { debounceTime } from 'rxjs/operators';
import { PlaceUseLog } from './../../../../../models/plactType';
import { Component, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import { BaseService, DataRegisterService } from 'src/app/services';
import { EventManagerService } from 'src/app/services/event-manager.service';
import { OrganizationService } from 'src/app/services/organization.service';
import { UploadService } from 'src/app/services/upload.service';
import { EngineService } from '../../../services/engine.service';
import { BaseFieldComponent } from '../base-field/base-field.component';
import { PlaceSelectModalComponent } from './place-select-modal/place-select-modal.component';
import * as dayjs from 'dayjs';

@Component({
  selector: 'zepride-place-select',
  templateUrl: './place-select.component.html',
  styleUrls: ['./place-select.component.less', '../field.common.less']
})
export class PlaceSelectComponent extends BaseFieldComponent implements OnInit, OnDestroy {
  inputValue;
  useMode: string;
  useNote: string;
  rowCount: number = 1;
  constructor(
    protected engineService: EngineService,
    protected baseSvr: BaseService,
    protected eventSvr: EventManagerService,
    protected orgSvr: OrganizationService,
    public uploadService: UploadService,
    protected msg: NzMessageService,
    private modal: NzModalService,
    private viewContainerRef: ViewContainerRef,
    protected dataRegisterService: DataRegisterService
  ) {
    super(engineService, baseSvr, eventSvr, orgSvr, uploadService, msg, dataRegisterService);
  }

  ngOnInit() {
    if (this.bindData) {
      this.inputValue = this.bindData.map(this.formatInputValue).join('\n');
    }

    this.registerModelChange();
  }

  registerModelChange() {
    this.modelChange$ = this.engineService.dataModelChange$.pipe(
      debounceTime(100)
    ).subscribe(data => {
      if (data.identifyId !== this.componentData.identifyId) {
        if (this.componentData.extends.useMode && this.componentData.extends.useMode.component.bindField == data.bindField) {
          this.useMode = this.dataModel[data.bindField];
        }

        if (this.componentData.extends.note && this.componentData.extends.note.component.bindField == data.bindField) {
          this.useNote = this.dataModel[data.bindField];
        }
      }
    });
  }

  ngOnDestroy() {
    if (this.modelChange$) {
      this.modelChange$.unsubscribe();
    }
  }

  selectPlace() {
    const modal = this.modal.create({
      nzTitle: '选择功能室',
      nzWidth: 1132,
      nzContent: PlaceSelectModalComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzComponentParams: {
        useMode: this.useMode,
        useNote: this.useNote
      },
      nzFooter: null
    });

    modal.afterClose.subscribe((result: PlaceUseLog[]) => {
      if (result && result.length > 0) {
        this.inputValue = result.map(this.formatInputValue).join('\n');
        this.rowCount = result.length;
        this.setData(result);
      }
    });
  }

  private formatInputValue(x: PlaceUseLog) {
    return `${x.placeName}(${dayjs(x.beginTime).format('YYYY-MM-DD HH:mm')} ~ ${dayjs(x.endTime).format('YYYY-MM-DD HH:mm')})`;
  }
}
